<!--竞猜足球-2选1 -->
<template>
	<view>
		<uni-collapse ref="collapse">
			<uni-collapse-item style="background-color: #f5f5f5;" :open="true" v-for="(d,i) in state.datas" :key="i">
				<template v-slot:title>
					<view class="collapse-item">
						<view class="collapse-item-title">
							<text class="ml10">{{d.businessDate}}</text>
							<text class="ml10">{{d.week}}</text>
							<text class="ml10">共
								<text style="color: red;">{{d.num}}</text>
								场比赛
							</text>
							<text class="ml10">截止{{d.overTime}}</text>
						</view>
					</view>
				</template>
				<view class="content">
					<view class="match-body" v-for="match in d.matchList">
						<view class="match-title">
							<view class="left">
								<p>{{match.matchNumStr}}</p>
								<p class="match-type">{{match.leagueAbbName}}</p>
							</view>
							<view class="team-info">
								<view>
									<text class="gray-text">[02]</text>
									<text class="team-name">{{match.homeTeamAbbName}}</text>
								</view>
								<view class="gray-text match-time">
									<p>{{match.matchDateStr}}</p>
									<p>{{match.matchTime}}</p>
								</view>
								<view>
									<text class="team-name">{{match.awayTeamAbbName}}</text>
									<text class="gray-text">[01]</text>
								</view>
							</view>
							<view class="right">
								<view class="gray-text" @click="openMatchModel">
									<text>数据</text>
									<text :class="state.showMatchModel?'cicon-drop-up':'cicon-drop-down'"
										style="font-size: 20px;" />
								</view>
							</view>
						</view>
						<view class="match-data" v-if="match.rspfBonus.goalline.includes('+')">
							<view>
								<view class="data-item" :class="match.rspfBonus.s.x?'select-game-data':''"
									@click="selectData(match,'rspf',match.rspfBonus.s,match.rspfBonus.single)">
									<view class="data-item-view">
										<text class="game-rq-red">{{match.rspfBonus.goalline}}</text>
										<text class="game-rs">{{match.rspfBonus.s.n}}</text>
										<text class="game-ps">{{match.rspfBonus.s.v}}</text>
									</view>
								</view>
							</view>
							<view>
								<view class="data-item" :class="match.spfBonus.f.x?'select-game-data':''"
									@click="selectData(match,'rspf',match.spfBonus.f,match.spfBonus.single)">
									<view class="data-item-view">
										<text class="game-rs">{{match.spfBonus.f.n}}</text>
										<text class="game-ps">{{match.spfBonus.f.v}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="match-data" v-else>
							<view>
								<view class="data-item" :class="match.spfBonus.s.x?'select-game-data':''"
									@click="selectData(match,'rspf',match.spfBonus.s,match.spfBonus.single)">
									<view class="data-item-view">
										<text class="game-rs">{{match.spfBonus.s.n}}</text>
										<text class="game-ps">{{match.spfBonus.s.v}}</text>
									</view>
								</view>
							</view>
							<view>
								<view class="data-item" :class="match.rspfBonus.f.x?'select-game-data':''"
									@click="selectData(match,'rspf',match.rspfBonus.f,match.rspfBonus.single)">
									<view class="data-item-view">
										<text class="game-rq-green">{{match.rspfBonus.goalline}}</text>
										<text class="game-rs">{{match.rspfBonus.f.n}}</text>
										<text class="game-ps">{{match.rspfBonus.f.v}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</uni-collapse-item>

		</uni-collapse>


		<!-- 竞猜数据弹窗 -->
		<su-popup :show="state.showDataModel" type="bottom" round="10" @change="dataModelChange" :space="20"
			:zIndex="9000" :showClose="true">
			<view class="popup-body">
				<view class="match-title">
					<view class="left">
						<p>周三001</p>
					</view>
					<view class="team-info">
						<view>
							<text class="gray-text">[02]</text>
							<text class="team-name">阿森纳</text>
						</view>
						<view class="gray-text match-time">
							<p>13:09</p>
						</view>
						<view>
							<text class="team-name">皇马</text>
							<text class="gray-text">[01]</text>
						</view>
					</view>
					<view class="right">
						<p class="popup-match-type">西甲</p>
					</view>
				</view>


				<view class="popup-data spf">
					<table>
						<tr>
							<td width="10%" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								0
							</td>
							<td width="30%" class="select-game-data"><text class="data-name">胜</text><text
									class="data-value">3.41</text></td>
							<td width="30%"><text class="data-name">平</text><text class="data-value">2.32</text></td>
							<td width="30%"><text class="data-name">负</text><text class="data-value">1.53</text></td>
						</tr>
						<tr>
							<td class="dangguan-no-bg">-1</td>
							<td><text class="data-name">胜</text><text class="data-value">3.41</text></td>
							<td><text class="data-name">平</text><text class="data-value">3.41</text></td>
							<td class="select-game-data"><text class="data-name">负</text><text
									class="data-value">3.41</text></td>
						</tr>
					</table>
				</view>
				<view class="popup-data ttg">
					<table>
						<tr>
							<td width="10%" rowspan="2" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								<br>总<br>进<br>球
							</td>
							<td width="22%"><text class="data-name">0</text><text class="data-value">3.41</text></td>
							<td width="22%"><text class="data-name">1</text><text class="data-value">3.41</text></td>
							<td width="22%"><text class="data-name">2</text><text class="data-value">3.41</text></td>
							<td width="22%"><text class="data-name">3</text><text class="data-value">3.41</text></td>
						</tr>
						<tr>
							<td><text class="data-name">4</text><text class="data-value">3.41</text></td>
							<td><text class="data-name">5</text><text class="data-value">3.41</text></td>
							<td class="select-game-data"><text class="data-name">6</text><text
									class="data-value">3.41</text></td>
							<td><text class="data-name">7+</text><text class="data-value">3.41</text></td>
						</tr>
					</table>
				</view>
				<view class="popup-data qbc">
					<table>
						<tr>
							<td width="10%" rowspan="3" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								<br>半<br>全<br>场
							</td>
							<td width="30%"><text class="data-name">胜胜</text><text class="data-value">3.41</text></td>
							<td class="select-game-data" width="30%"><text class="data-name">胜平</text><text
									class="data-value">3.41</text></td>
							<td width="30%"><text class="data-name">胜负</text><text class="data-value">3.41</text></td>
						</tr>
						<tr>
							<td><text class="data-name">平胜</text><text class="data-value">3.41</text></td>
							<td><text class="data-name">平平</text><text class="data-value">3.41</text></td>
							<td><text class="data-name">平负</text><text class="data-value">3.41</text></td>
						</tr>
						<tr>
							<td><text class="data-name">负胜</text><text class="data-value">3.41</text></td>
							<td><text class="data-name">负平</text><text class="data-value">3.41</text></td>
							<td><text class="data-name">负负</text><text class="data-value">3.41</text></td>
						</tr>
					</table>
				</view>
				<view class="popup-data bf">
					<table>
						<tr>
							<td width="10%" rowspan="5" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								<br>比<br>分
							</td>
							<td width="12.7%">
								<p class="data-name">1:0</p>
								<p class="data-value">6.93</p>
							</td>
							<td width="12.7%">
								<p class="data-name">2:0</p>
								<p class="data-value">6.93</p>
							</td>
							<td width="12.7%">
								<p class="data-name">2:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td width="12.7%">
								<p class="data-name">3:0</p>
								<p class="data-value">6.93</p>
							</td>
							<td class="select-game-data" width="12.7%">
								<p class="data-name">3:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td width="12.7%">
								<p class="data-name">3:2</p>
								<p class="data-value">6.93</p>
							</td>
							<td width="12.7%">
								<p class="data-name">4:0</p>
								<p class="data-value">6.93</p>
							</td>
						</tr>
						<tr>
							<td>
								<p class="data-name">4:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">5:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">5:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">5:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">5:2</p>
								<p class="data-value">6.93</p>
							</td>
							<td colspan="2">
								<p class="data-name">胜其他</p>
								<p class="data-value">6.93</p>
							</td>

						</tr>
						<tr>
							<td>
								<p class="data-name">0:0</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">1:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">2:2</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">3:3</p>
								<p class="data-value">6.93</p>
							</td>
							<td colspan="3">
								<p class="data-name">平其他</p>
								<p class="data-value">6.93</p>
							</td>

						</tr>
						<tr>
							<td>
								<p class="data-name">0:1</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">0:2</p>
								<p class="data-value">6.93</p>
							</td>
							<td class="select-game-data">
								<p class="data-name">1:2</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">0:3</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">1:3</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">2:3</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">0:4</p>
								<p class="data-value">6.93</p>
							</td>
						</tr>
						<tr>
							<td>
								<p class="data-name">1:4</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">2:4</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">0:5</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">1:5</p>
								<p class="data-value">6.93</p>
							</td>
							<td>
								<p class="data-name">2:5</p>
								<p class="data-value">6.93</p>
							</td>
							<td colspan="2">
								<p class="data-name">负其他</p>
								<p class="data-value">6.93</p>
							</td>

						</tr>
					</table>
				</view>

				<view class="popup-footer">
					<button type="info" size="mini">取 消</button>
					<button type="primary" size="mini">确 认</button>
				</view>
			</view>

		</su-popup>

		<!-- 比赛数据分析弹窗 -->
		<su-popup :show="state.showMatchModel" type="bottom" round="10" @change="matchModelChange" :space="60"
			:zIndex="9000" :showClose="true">
			<view class="model-box ss-flex-col">
				<view class="ss-m-t-56 ss-flex-col ss-col-center">
					<text class="cicon-check-round"></text>
					<view class="score-title">
						<text>比赛数据分析界面 </text>
						<text> 比赛数据分析界面 </text>
					</view>
					<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
						比赛数据分析界面
					</view>
				</view>
				<view class="model-bg ss-flex-col ss-col-center ss-row-right">
					<view class="title ss-m-b-64">比赛数据分析界面 </view>
					<view class="ss-m-b-40">
						<button class="ss-reset-button confirm-btn">确认</button>
					</view>
				</view>
			</view>
		</su-popup>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import FootballApi from '@/sheep/api/sporttery/football';

	const props = defineProps({
		item: {
			type: Object,
			default () {},
		},
	});
	const state = reactive({
		showMatchModel: false,
		showDataModel: false,
		datas: [],
		selectItems: [],
	});

	async function getList() {
		const {
			code,
			data
		} = await FootballApi.getSellingMatchs({type:2});//0：表示混合,1表示单关，2：表示2选1界面，
		if (code !== 0) {
			return;
		}
		state.datas = data;
	}
	//发送给父组件的数据，
	const emit = defineEmits(['data-update']); // 声明要触发的事件
	function selectData(matchInfo, selectType, selectItem,single) {
		selectItem.x = selectItem.x ? false : true;
		const data = {
			matchId: matchInfo.matchId,
			matchNum: matchInfo.matchNum,
			selectItem: selectItem,
		};
		
		if(state.selectItems.length==0){
			if(selectItem.x){
				state.selectItems.push(data);
			}
		}else{
			const s = state.selectItems.find(x => x.matchId == matchInfo.matchId && x.matchNum == matchInfo.matchNum && x.selectItem.c == selectItem.c);
			//不存在，倍选中，就添加
			if (!s && selectItem.x) {
				state.selectItems.push(data);
				
			}
			//存在，没有选中，就移除
			if (s && !selectItem.x) {
				const index = state.selectItems.indexOf(s);
				state.selectItems.splice(index,1);
			}
		}
		const xuanList = state.selectItems.filter(x => x.matchId == matchInfo.matchId);
		matchInfo.selectItemNum = xuanList.length;
		
		const groupDatas = state.selectItems.reduce((map, item) => {
			const group = map.get(item.matchId) || []
			group.push(item)
			return map.set(item.matchId, group)
		}, new Map());
		const rdata = {
			selectNum: groupDatas.size, //总选择的场次
			selectMatchs: groupDatas //根据场次分组好的选项
		};
		
		//父组件用data-update属性来接收
		emit('data-update', rdata) // 触发事件并传递数据
	};


	function openMatchModel(e) {
		state.showMatchModel = true;
	};

	function openDataModel(e) {
		state.showDataModel = true;
	};

	function dataModelChange(e) {
		state.showDataModel = e.show;
	};

	function matchModelChange(e) {
		state.showMatchModel = e.show
	};
	// 加载更多
	function loadMore() {
		// if (state.loadStatus === 'noMore') {
		//   return;
		// }
		// state.pagination.pageNo++;
		// getList(state.currentSort, state.currentOrder);
	}

	onLoad((options) => {
		getList();
	});

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	.collapse-item {
		padding-top: 5px;

	}

	.collapse-item-title {
		height: 15px;
		line-height: 15px;
		margin-bottom: 5px;
		font-size: 14px;
		color: #39b54a
	}

	.content {
		background-color: #f5f5f5;
	}

	.left {
		color: #ff557f;
		font-weight: bold;
	}

	.ml10 {
		margin-left: 10px;
	}

	.match-body {
		margin-top: 2px;
		padding: 7px 10px;
		background-color: white;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	.match-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.match-type {
		background-color: green;
		color: white;
		text-align: center;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	.team-info {
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.match-data {
		display: flex;
		flex-direction: row;
		justify-content: center;

	}

	.data-item {
		border: 1px solid #d1d1f5;
		border-radius: 4px;
		margin: 2px 2px;
		padding: 10px 5px;
		text-align: right;
		width: 90px;
		background-color: #f5f5f5;
		font-size: 14px;

	}

	.other {
		width: 50px;
		font-size: 8px;
		height: 18px;
	}

	.gray-text {
		color: gray;
	}

	.match-time {
		margin-left: 8px;
		margin-right: 8px;
	}

	.team-name {
		font-size: 14px;
		font-weight: bold;
		padding: 5px 5px;
	}

	.data-item-view {
		margin-right: 20%;
	}

	.game-rs {
		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}

	.game-ps {
		color: gray;
	}

	.game-rq-red {
		color: red;
	}

	.game-rq-green {
		color: green;
	}

	.select-game-data {
		background-color: #fc3123;

	}

	.select-game-data text {
		color: #f5f5f5;
	}

	.select-game-data p {
		color: #f5f5f5;
	}

	.match-fenxi {
		background-color: red;
	}

	.popup-body {
		margin: 10px 10px;
	}

	.popup-data {
		display: flex;
		flex-direction: row;

	}

	.popup-data-left {
		border: 1px solid #fc3123;
		padding: 5px 5px;
		margin: 5px 3px;
		width: 20px;
		text-align: center;
		border-radius: 3px;
	}

	.text-orientation-upright {
		writing-mode: vertical-rl;
		/* 从右到左的垂直排列 */
		text-orientation: upright;
		/* 文本方向保持直立 */
	}

	.popup-match-data {
		width: 90%;
	}

	.popup-match-type {
		background-color: green;
		color: white;
		text-align: center;
		border-radius: 3px;
		padding: 3px 3px;
		font-size: 8px;
	}

	table {
		width: 100%;
		text-align: center;
		border-collapse: collapse;
		font-size: 13px;
		border-radius: 5px;
		margin-top: 15px;
	}

	table tr {
		height: 30px;
	}

	table td {
		border: 1px solid #ccc;
	}

	image {
		width: 25px;
		height: 25px;
		position: absolute;
		left: -3px;
		top: -3px;
	}

	.data-name {
		font-weight: bold;
	}

	.data-value {
		color: #969696;
		margin-left: 5px;
	}

	.dangguan-bg {
		background: #ffebeb;
		color: #f24444;
	}

	.dangguan-no-bg {
		background: #dbefff;
		color: #1d91f2;
	}

	.popup-footer {
		text-align: center;
		padding: 10px 30px;
		display: flex;
		justify-content: space-around;
	}
</style>